<template>
  <div class="home">
    <h2>demo</h2>
    <div class="features">
      <div class="feature-item" @click="$router.push('/Xc40')">
        <p>Xc40 页面</p>
      </div>
    </div>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style lang="scss" scoped>
.home {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;

  h2 {
    font-size: 2em;
    color: #1c6bba;
    margin-bottom: 20px;
  }

  .description {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 40px;
    line-height: 1.6;
  }

  .features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;

    .feature-item {
      padding: 20px;
      background: #f5f5f5;
      border-radius: 8px;
      transition: transform 0.3s;
      cursor: pointer;

      &:hover {
        transform: translateY(-5px);
      }

      h3 {
        color: #1c6bba;
        margin-bottom: 10px;
      }

      p {
        color: #666;
        line-height: 1.5;
      }
    }
  }
}
</style>
